<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:replace="common/top">

    </div>
    <div id="Content">
        <div id="Catalog">

            <form action="/order/confirmOrder" method="post">
                <div>
                    <div class="tab-header">
                        <ul>
                            <li data-id="PayerInfo">支付方信息</li>
                            <li data-id="DeliveryInfo">配送信息</li>
                        </ul>
                    </div>
                    <div class="tab-body">
                        <div class="tab1" id="PayerInfo">
                            <table>
                                <tr>
                                    <th colspan=2><h2>支付金额:</h2></th>
                                    <th><p th:value="${session.order.totalPrice}"></p></th>
                                </tr>

                                <tr>
                                    <th colspan=2><h2>支付方信息</h2></th>
                                </tr>
                                <tr>
                                    <td>名:</td>
                                    <td><input type="text" name="billToFirstName" th:value="${session.order.billToFirstName}"></td>
                                </tr>
                                <tr>
                                    <td>姓:</td>
                                    <td><input type="text" name="billToLastName" th:value="${session.order.billToLastName}"></td>
                                </tr>
                                <tr>
                                    <td>地址一:</td>
                                    <td><input type="text" size="40" name="billAddress1" th:value="${session.order.billAddress1}"></td>
                                </tr>
                                <tr>
                                    <td>地址二:</td>
                                    <td><input type="text" size="40" name="billAddress2" th:value="${session.order.billAddress1}"></td>
                                </tr>
                                <tr>
                                    <td>城市:</td>
                                    <td><input type="text" name="billCity" th:value="${session.order.billCity}"></td>
                                </tr>
                                <tr>
                                    <td>省份:</td>
                                    <td><input type="text" size="4" name="billState" th:value="${session.order.billState}"></td>
                                </tr>
                                <tr>
                                    <td>邮政编码:</td>
                                    <td><input type="text" size="10" name="billZip" th:value="${session.order.billZip}"></td>
                                </tr>
                                <tr>
                                    <td>国家:</td>
                                    <td><input type="text" size="15" name="billCountry" th:value="${session.order.billCountry}"></td>
                                </tr>
                                <tr>
                                    <td colspan=2>
                                        <input type="checkbox" name="shippingAddressRequired" id="shippingAddressRequired">
                                        邮寄到其他地址...
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="tab2" id="DeliveryInfo">
                            <table>
                                <tr>
                                    <th colspan=2><h2>配送信息</h2></th>
                                </tr>

                                <tr>
                                    <td>名:</td>
                                    <td><input type="text" name="shipToFirstName" th:value="${session.order.shipToFirstName}"/></td>
                                </tr>
                                <tr>
                                    <td>姓:</td>
                                    <td><input type="text" name="shipToLastName" th:value="${session.order.shipToLastName}"/></td>
                                </tr>
                                <tr>
                                    <td>地址一:</td>
                                    <td><input type="text" size="40" name="shipAddress1" th:value="${session.order.shipAddress1}"/></td>
                                </tr>
                                <tr>
                                    <td>地址二:</td>
                                    <td><input type="text" size="40" name="shipAddress2" th:value="${session.order.shipAddress2}"/></td>
                                </tr>
                                <tr>
                                    <td>城市:</td>
                                    <td><input type="text" name="shipCity" th:value="${session.order.shipCity}"/></td>
                                </tr>
                                <tr>
                                    <td>省份:</td>
                                    <td><input type="text" size="4" name="shipState" th:value="${session.order.shipState}"/></td>
                                </tr>
                                <tr>
                                    <td>邮政编码:</td>
                                    <td><input type="text" size="10" name="shipZip" th:value="${session.order.shipZip}"/></td>
                                </tr>
                                <tr>
                                    <td>国家:</td>
                                    <td><input type="text" size="15" name="shipCountry" th:value="${session.order.shipCountry}"/></td>
                                </tr>

                            </table>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <input type="submit" name="newOrder" th:value="Continue">
            </form>

            <script>
                $(function(){
                    $('#shippingAddressRequired').on('click',function () {
                        var status = $('input[name="shippingAddressRequired"]').prop('checked');
                        if (status) {
                            $('.tab2').css("display","block");
                        }else{
                            $('.tab2').css("display","none");
                        }
                    })
                })
            </script>
        </div>
        <br>
        <br>
    </div>
    <div th:replace="common/bottom">

    </div>
</body>
</html>